<template>
	<view class="">
		<view class="fc" v-show="fcIs" @tap=" fcIs= !fcIs">
			<view class="c_box" @click.stop >
				<view class="title">备注信息:</view>
				<input type="text" value="" v-model="beizhu" placeholder="请输入联系电话，丢失时间，丢失地点，犬只特征等。"/>
				<button type="primary" style="background-color:#fcd700;" @tap="find">确认寻犬</button>
			</view>
		</view>
		<view class="content">
			<view v-if="val.examine == 1" class="box" style="display: flex;flex-direction: column;margin: 20upx 0;" v-for="val of list"
			 :key="val.dogId">
				<view v-if="val.status == 0||val.status == 1">
					<view style="display: flex;padding: 20upx;">
						<image :src="val.dogAvatar" mode=""></image>
						<view class="text">
							<text>犬只ID: {{ val.dogId }}</text>
							<text>犬只名字: {{ val.dogName }}</text>

							<!-- <text>主人电话: {{ val.phone }}</text> -->
						</view>
					</view>
					<view>
						<!-- <button type="primary" style="background-color:#fcd700;" @tap="find(val.doguid)">确认寻犬</button> -->
						<button type="primary" style="background-color:#fcd700;" @tap="tan(val.doguid)">确认寻犬</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import CHONG from '../../static/js/function.js';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['URL', 'TOKEN']),
		data() {
			return {
				fcIs: false,
				dogId: 'd1f214541',
				phone: '156-596-4857',
				examine: "",
				beizhu: "",
				doguid: "",
				list: []
			};
		},
		methods: {
			tan(e) {
				this.doguid = e;
				this.fcIs = true;
			},
			find() {
				CHONG.tip('提交中', 0);
				uni.request({
					url: this.URL + 'loss',
					data: {
						id: this.doguid,
						bz: this.beizhu
					},
					success: res => {
						if (!res.data.success) {
							CHONG.tip(res.data.msg);
						}
						console.log(res.data);
						let json = res.data;
						this.examine = json.mapData.examine;
						this.list = json.data;
						if (json.success) {
							setTimeout(() => {
								uni.navigateBack({});
							}, 1500);
						}
						CHONG.tip(json.msg);
					}
				});
			},
			getlist() {
				console.log(11);
				uni.request({
					url: this.URL + 'getUserByOpenId',
					data: {
						wxid: this.TOKEN
					},
					success: res => {
						console.log('挂失列表');
						console.log(res.data);
						let json = res.data;
						this.examine = json.mapData.examine;
						this.list = json.data;
					}
				});
			}
		},
		onLoad() {
			this.getlist();
		}
	};
</script>

<style lang="scss">
	.fc {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		background-color: darkgray;

		.c_box {
			width: 70%;
			height: 260upx;
			background: white;
			border: 1px solid darkgray;
			border-radius: 5upx;
			padding: 20upx;
			margin-top: 100upx;

			.title {
				margin-bottom: 20upx;
			}

			input {
				padding: 0 10upx;
				border: 1px solid darkgray;
				border-radius: 5upx;
				margin-bottom: 50upx;
				font-size: 20upx;
			}
		}
	}

	.content {
		font-size: 26upx;
		padding: 20upx;

		.box {
			background: white;
			border-radius: 20upx;
			display: flex;
			justify-content: space-between;

			image {
				width: 200upx;
				height: 200upx;
			}

			.text {
				flex: 1;
				display: flex;
				flex-direction: column;
				text-align: center;
				justify-content: center;

				text {
					line-height: 50upx;
				}
			}
		}

		button {
			margin: 50upx 140upx;
		}
	}

	.red {
		color: red;
		background: red;
	}
</style>
